<ion-header class="phone-title">
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left" (click)="closeModal()">
                <img src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>手机号</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content class="phone-change">
    <div class="phone" *ngIf="!TheNext">
        <div><label for="">+86</label><input type="text" [(ngModel)]="phoneNumber"></div>
        <div><input type="text" placeholder="验证码" [(ngModel)]="VCode"><span [ngClass]="{'active': !phoneNumber}" (click)="getVcode()">{{ clock || '获取验证码' }}<i *ngIf="clock">秒</i></span></div>
        <button [ngClass]="{'nextNot': !VCode}" (click)="Next(phoneNumber)">下一步</button>
        <p>一个手机只能绑定一个账号的登录名</p>
    </div>
    <div class="phone-submit" *ngIf="TheNext">
        <div>
            <img src="../../../assets/imgs/logo.png" alt="">
            <p>绑定的手机号: <i>+86{{ phoneNumber }}</i></p>
            <button (click)="Finish(phoneNumber)">Finish: <i>+86{{ phoneNumber }}</i></button>
        </div>
    </div>
</ion-content>